<template>
  <el-row :gutter="30">
    <!-- 柱状图 -->
    <div class="clear">
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barOption" />
        <p class="title">柱状图</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barNegativeOption" />
        <p class="title">正负柱状图</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barTriplelineOption" />
        <p class="title">柱状图+三基准线+类目加粗</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barSixlineOption" />
        <p class="title">柱状图+六基准线+类目加粗</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barStackOption" />
        <p class="title">堆叠图</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barStackCompareOption" />
        <p class="title">堆叠图（同业对比， 升序, 颜色区分）</p>
      </el-col>
    </div>
    <!-- 折线图 -->
    <div class="clear">
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="lineOption" />
        <p class="title">折线图</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="lineDoubleOption" />
        <p class="title">双折线图</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="lineBaselineOption" />
        <p class="title">折线图+单基准线</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="lineDoublelineOption" />
        <p class="title">折线图+双基准线</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="lineTriplelineOption" />
        <p class="title">折线图+三基准线+类目标粗</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="lineSixlineOption" />
        <p class="title">双折线图+六基准线+类目标粗</p>
      </el-col>
      <el-col :span="12" class="chart">
        <v-chart autoresize :option="lineBubbleOption" />
        <p class="title">气泡图+双基准线</p>
      </el-col>
    </div>
    <!-- 柱状+折线图 -->
    <div class="clear">
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barLineOption" />
        <p class="title">柱状+折线图</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barLineStackOption" />
        <p class="title">堆叠+折线图</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barDoubleLineOption" />
        <p class="title">双柱+单折线</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barDoubleLineDoubleOption" />
        <p class="title">双柱+双折线</p>
      </el-col>
      <el-col :span="8" class="chart">
        <v-chart autoresize :option="barLineLineTripleOption" />
        <p class="title">柱图+折线图+三基准线</p>
      </el-col>
    </div>
    <!-- 饼图 -->
    <div class="clear">
      <el-col :span="12" class="chart">
        <v-chart ref="pieChart" autoresize :option="pieOption" />
        <p class="title">饼图</p>
      </el-col>
      <el-col :span="12" class="chart">
        <v-chart ref="pieDoubleChart" autoresize :option="pieDoubleOption" />
        <p class="title">嵌套环图</p>
      </el-col>
    </div>
    <!-- 散点图 -->
    <div class="clear">
      <el-col :span="12" class="chart">
        <v-chart autoresize :option="scatterOption" />
        <p class="title">散点图</p>
      </el-col>
    </div>
    <!-- 仪表盘 -->
    <div class="clear">
      <el-col :span="12" class="chart">
        <v-chart autoresize :option="ringGaugeOption" />
        <p class="title">得分环</p>
      </el-col>
    </div>
  </el-row>
</template>

<script>
import { reactive } from '@vue/composition-api'
import { barStack, line, barLine, pie, scatter, gauge } from '@/chart-category'
import { setMarkLine, setLineScatter, setSctterLegendColor } from '@/chart-category/util'
export default {
  setup(props, { refs }) {
    /* 柱状图 */
    const barOption = reactive(
      barStack({
        legend: {
          data: ['对公']
        },
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: {
          name: '亿元'
        },
        series: [
          {
            name: '对公',
            type: 'bar',
            data: [22, 10, 16, 25, 30, 44]
          }
        ]
      })
    )
    /* 正负柱状图 */
    const barNegativeOption = reactive(
      barStack({
        legend: {
          data: ['对公']
        },
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: {
          name: '亿元'
        },
        series: [
          {
            name: '对公',
            type: 'bar',
            data: [-22, 10, 16, -25, 30, 44]
          }
        ]
      })
    )
    /* 柱状图+三基准线+类目加粗 */
    const barTriplelineOption = reactive(
      barStack({
        xAxis: {
          data: [
            '2022-01',
            '2022-02',
            '2022-03',
            { value: '2022-04', textStyle: { fontWeight: 'bold', color: '#333' } },
            '2022-05',
            { value: '2022-06', textStyle: { fontWeight: 'bold', color: '#333' } }
          ]
        },
        yAxis: {
          name: '亿元'
        },
        color: ['#ff791a', 'green', 'yellow', 'purple'],
        grid: { right: 30 },
        legend: {
          itemHeight: 1,
          data: ['基准线A', '基准线B', '基准线C']
        },
        series: [
          {
            name: '对公',
            type: 'bar',
            data: [
              22,
              10,
              16,
              { value: 25, itemStyle: { color: 'blue' } },
              30,
              { value: 44, itemStyle: { color: 'red' } }
            ]
          },
          setMarkLine({
            name: '基准线A',
            data: 18,
            labelColor: 'yellow'
          }),
          setMarkLine({
            name: '基准线B',
            data: 25,
            labelColor: 'green'
          }),
          setMarkLine({
            name: '基准线C',
            data: 15,
            labelColor: 'purple'
          })
        ]
      })
    )
    /* 双柱图+六基准线+类目标粗 */
    const barSixlineOption = reactive(
      barStack({
        xAxis: {
          data: [
            '2022-01',
            '2022-02',
            '2022-03',
            { value: '2022-04', textStyle: { fontWeight: 'bold', color: '#333' } },
            '2022-05',
            { value: '2022-06', textStyle: { fontWeight: 'bold', color: '#333' } }
          ]
        },
        yAxis: {
          name: '亿元'
        },
        color: ['#ff791a', 'blue', 'green', 'yellow', 'purple', 'red', 'darkgreen', 'darkblue'],
        grid: { right: 30, bottom: 80 },
        legend: [
          {
            data: ['对公', '对私'],
            top: 230
          },
          {
            itemHeight: 1,
            data: ['基准线A', '基准线B', '基准线C', '基准线D', '基准线E', '基准线F'],
            top: 260
          }
        ],
        series: [
          {
            name: '对公',
            type: 'bar',
            data: [22, 10, 16, 25, 30, 44],
            barWidth: 20
          },
          {
            name: '对私',
            type: 'bar',
            data: [2, 4, 5, 3, 7, 2],
            barWidth: 20
          },
          setMarkLine({
            name: '基准线A',
            labelColor: 'green',
            data: 18
          }),
          setMarkLine({
            name: '基准线B',
            labelColor: 'yellow',
            data: 25
          }),
          setMarkLine({
            name: '基准线C',
            labelColor: 'purple',
            data: 15
          }),
          setMarkLine({
            name: '基准线D',
            labelColor: 'red',
            data: 8
          }),
          setMarkLine({
            name: '基准线E',
            labelColor: 'darkgreen',
            data: 30
          }),
          setMarkLine({
            name: '基准线F',
            labelColor: 'darkblue',
            data: 35
          })
        ]
      })
    )
    /* 堆叠图 */
    const barStackOption = reactive(
      barStack({
        legend: {
          data: ['对公', '零售']
        },
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: {
          name: '亿元'
        },
        series: [
          {
            name: '对公',
            type: 'bar',
            stack: 'month',
            data: [22, 10, 16, 25, 30, 44]
          },
          {
            name: '零售',
            type: 'bar',
            stack: 'month',
            data: [12, 4, 6, 5, 3, 14]
          }
        ]
      })
    )

    /* 堆叠图（同业对比） */
    const barStackCompareOption = reactive(
      barStack({
        legend: {
          data: ['对公', '零售']
        },
        xAxis: {
          data: ['北京银行', '上海银行', '广州银行', '成都银行', '宁波银行']
        },
        yAxis: {
          name: '亿元'
        },
        series: [
          {
            name: '对公',
            type: 'bar',
            stack: 'month',
            data: [
              { value: 12 },
              { value: 14 },
              { value: 16 },
              { value: 18, itemStyle: { color: 'red' } },
              { value: 20, itemStyle: { color: 'yellow' } }
            ]
          },
          {
            name: '零售',
            type: 'bar',
            stack: 'month',
            data: [
              { value: 2 },
              { value: 4 },
              { value: 6 },
              { value: 7, itemStyle: { color: '#ff4949' } },
              { value: 8, itemStyle: { color: '#ffff7c' } }
            ]
          }
        ]
      })
    )

    /* 折线图 */
    const lineOption = reactive(
      line({
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: {
          name: '亿元'
        },
        series: [
          {
            name: '对公',
            type: 'line',
            data: [22, 10, 16, 25, 30, 44]
          }
        ]
      })
    )
    /* 双折线图 */
    const lineDoubleOption = reactive(
      line({
        legend: {
          data: ['对公', '零售']
        },
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: {
          name: '亿元'
        },
        series: [
          {
            name: '对公',
            type: 'line',
            data: [22, 10, 16, 25, 30, 44]
          },
          {
            name: '零售',
            type: 'line',
            data: [12, 4, 6, 5, 3, 14]
          }
        ]
      })
    )
    /* 折线图+单基准线 */
    const lineBaselineOption = reactive(
      line({
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: {
          name: '亿元'
        },
        color: ['#ff791a', 'green'],
        legend: {
          itemHeight: 1,
          data: ['基准线']
        },
        series: [
          {
            name: '对公',
            type: 'line',
            data: [22, 10, 16, 25, 30, 44]
          },
          setMarkLine({
            name: '基准线',
            lineColor: 'green',
            data: 18
          })
        ]
      })
    )
    /* 折线图+双基准线 */
    const lineDoublelineOption = reactive(
      line({
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: {
          name: '亿元'
        },
        color: ['#ff791a', 'green', 'yellow'],
        grid: { right: 30 },
        legend: {
          itemHeight: 1,
          data: ['基准线A', { name: '基准线B', lineStyle: { type: [3, 3] } }]
        },
        series: [
          {
            name: '对公',
            type: 'line',
            data: [22, 10, 16, 25, 30, 44]
          },
          setMarkLine({
            name: '基准线A',
            lineColor: 'green',
            data: 18,
            dataLabel: '季末'
          }),
          setMarkLine({
            name: '基准线B',
            lineColor: 'yellow',
            lineType: 'dashed',
            data: 25,
            dataLabel: '监管'
          })
        ]
      })
    )
    /* 折线图+三基准线+类目标粗 */
    const lineTriplelineOption = reactive(
      line({
        xAxis: {
          data: [
            '2022-01',
            '2022-02',
            '2022-03',
            { value: '2022-04', textStyle: { fontWeight: 'bold', color: '#333' } },
            '2022-05',
            { value: '2022-06', textStyle: { fontWeight: 'bold', color: '#333' } }
          ]
        },
        yAxis: {
          name: '亿元'
        },
        color: ['#ff791a', 'green', 'yellow', 'purple'],
        grid: { right: 30 },
        legend: {
          itemHeight: 1,
          data: ['基准线A', '基准线B', '基准线C']
        },
        series: [
          {
            name: '对公',
            type: 'line',
            data: [22, 10, 16, 25, 30, 44]
          },
          setMarkLine({
            name: '基准线A',
            data: 18,
            labelColor: 'yellow'
          }),
          setMarkLine({
            name: '基准线B',
            data: 25,
            labelColor: 'green'
          }),
          setMarkLine({
            name: '基准线C',
            data: 15,
            labelColor: 'purple'
          })
        ]
      })
    )
    /* 双折线图+六基准线+类目标粗 */
    const lineSixlineOption = reactive(
      line({
        xAxis: {
          data: [
            '2022-01',
            '2022-02',
            '2022-03',
            { value: '2022-04', textStyle: { fontWeight: 'bold', color: '#333' } },
            '2022-05',
            { value: '2022-06', textStyle: { fontWeight: 'bold', color: '#333' } }
          ]
        },
        yAxis: {
          name: '亿元'
        },
        color: ['#ff791a', 'blue', 'green', 'yellow', 'purple', 'red', 'darkgreen', 'darkblue'],
        grid: { right: 30, bottom: 80 },
        legend: [
          {
            data: ['对公', '对私'],
            top: 230
          },
          {
            itemHeight: 1,
            data: ['基准线A', '基准线B', '基准线C', '基准线D', '基准线E', '基准线F'],
            top: 260
          }
        ],
        series: [
          {
            name: '对公',
            type: 'line',
            data: [22, 10, 16, 25, 30, 44]
          },
          {
            name: '对私',
            type: 'line',
            data: [2, 4, 5, 3, 7, 2]
          },
          setMarkLine({
            name: '基准线A',
            labelColor: 'green',
            data: 18
          }),
          setMarkLine({
            name: '基准线B',
            labelColor: 'yellow',
            data: 25
          }),
          setMarkLine({
            name: '基准线C',
            labelColor: 'purple',
            data: 15
          }),
          setMarkLine({
            name: '基准线D',
            labelColor: 'red',
            data: 8
          }),
          setMarkLine({
            name: '基准线E',
            labelColor: 'darkgreen',
            data: 30
          }),
          setMarkLine({
            name: '基准线F',
            labelColor: 'darkblue',
            data: 35
          })
        ]
      })
    )
    /* 气泡图+双基准线 */
    const lineBubbleOption = reactive(
      line({
        xAxis: {
          data: [
            '2022-01',
            '2022-02',
            '2022-03',
            '2022-04',
            '2022-05',
            '2022-06',
            '2022-07',
            '2022-08',
            '2022-09',
            '2022-10'
          ]
        },
        yAxis: {
          name: '%'
        },
        color: ['#ff791a', '', 'green', 'yellow'],
        grid: {
          right: 30
        },
        legend: {
          itemHeight: 1,
          itemWidth: 28,
          borderRadius: 10,
          data: [
            '基准线A',
            { name: '基准线B', lineStyle: { type: [3, 3] } },
            setSctterLegendColor('气泡', 'theme')
          ]
        },
        series: [
          {
            name: '对公',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: [22, 10, 16, 25, 17, 10, 7, 5, 10, 16]
          },
          setLineScatter({
            name: '气泡',
            yAxisData: [22, 10, 16, 25, 17, 10, 7, 5, 10, 16],
            symbolData: [50, 44, 80, 32, 10, 35, 25, 45, 15, 60]
          }),
          setMarkLine({
            name: '基准线A',
            lineColor: 'green',
            data: 8,
            dataLabel: '季末'
          }),
          setMarkLine({
            name: '基准线B',
            lineColor: 'yellow',
            lineType: 'dashed',
            data: 15,
            dataLabel: '监管'
          })
        ]
      })
    )

    /* 柱形+折线图 */
    const barLineOption = reactive(
      barLine({
        legend: {
          data: ['对公', '零售']
        },
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: [{ name: '亿元' }, { name: '%' }],
        series: [
          {
            name: '对公',
            type: 'bar',
            data: [32, 10, 16, 25, 30, 57]
          },
          {
            name: '零售',
            type: 'line',
            data: [12, 4, 6, 5, 3, 14],
            yAxisIndex: 1
          }
        ]
      })
    )
    /* 堆叠+折线图 */
    const barLineStackOption = reactive(
      barLine({
        legend: {
          data: ['对公', '零售', '折线']
        },
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: [{ name: '亿元' }, { name: '%' }],
        series: [
          {
            name: '对公',
            type: 'bar',
            stack: 'month',
            data: [32, 10, 16, 25, 30, 57]
          },
          {
            name: '零售',
            type: 'bar',
            stack: 'month',
            data: [12, 4, 6, 5, 3, 14]
          },
          {
            name: '折线',
            type: 'line',
            data: [15, 10, 9, 11, 7, 22],
            yAxisIndex: 1
          }
        ]
      })
    )
    /* 双柱+单折线 */
    const barDoubleLineOption = reactive(
      barLine({
        legend: {
          data: ['对公', '零售', '折线']
        },
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: [{ name: '亿元' }, { name: '%' }],
        series: [
          {
            name: '对公',
            type: 'bar',
            data: [32, 10, 16, 25, 30, 57],
            barWidth: 20
          },
          {
            name: '零售',
            type: 'bar',
            data: [12, 4, 6, 5, 3, 14],
            barWidth: 20
          },
          {
            name: '折线',
            type: 'line',
            data: [15, 10, 9, 11, 7, 22],
            yAxisIndex: 1
          }
        ]
      })
    )
    /* 双双柱+双折线 */
    const barDoubleLineDoubleOption = reactive(
      barLine({
        legend: {
          data: ['对公', '零售', '折线一', '折线二']
        },
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: [{ name: '亿元' }, { name: '%' }],
        series: [
          {
            name: '对公',
            type: 'bar',
            data: [32, 10, 16, 25, 30, 57],
            barWidth: 20
          },
          {
            name: '零售',
            type: 'bar',
            data: [12, 4, 6, 5, 3, 14],
            barWidth: 20
          },
          {
            name: '折线一',
            type: 'line',
            data: [15, 10, 9, 11, 7, 22],
            yAxisIndex: 1
          },
          {
            name: '折线二',
            type: 'line',
            data: [8, 20, 11, 8, 7, 15],
            yAxisIndex: 1
          }
        ]
      })
    )
    /* 柱图+折线图+三基准线 */
    const barLineLineTripleOption = reactive(
      barLine({
        legend: [
          {
            data: ['对公', '零售', '折线'],
            top: 255
          },
          {
            itemHeight: 1,
            data: ['基准线A', '基准线B', '基准线C'],
            top: 280
          }
        ],
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06']
        },
        yAxis: [{ name: '亿元' }, { name: '%' }],
        grid: {
          right: 30,
          bottom: 50
        },
        color: ['#ff791a', 'blue', 'green', 'yellow', 'purple', 'red'],
        series: [
          {
            name: '对公',
            type: 'bar',
            data: [32, 10, 16, 25, 30, 57],
            barWidth: 20
          },
          {
            name: '零售',
            type: 'bar',
            data: [12, 4, 6, 5, 3, 14],
            barWidth: 20
          },
          {
            name: '折线',
            type: 'line',
            data: [15, 10, 9, 11, 7, 22],
            yAxisIndex: 1
          },
          setMarkLine({
            name: '基准线A',
            data: 18,
            labelColor: 'yellow'
          }),
          setMarkLine({
            name: '基准线B',
            data: 25,
            labelColor: 'purple'
          }),
          setMarkLine({
            name: '基准线C',
            data: 15,
            labelColor: 'red'
          })
        ]
      })
    )

    /* 饼图 */
    const pieOption = reactive(
      pie(
        {
          title: {
            subtext: '授信余额'
          },
          legend: {
            data: ['制造业', '建筑行业', '农林牧渔业', '零售业', '采矿业', '其他']
          },
          series: [
            {
              type: 'pie',
              data: [
                { name: '制造业', value: 32 },
                { name: '建筑行业', value: 10 },
                { name: '农林牧渔业', value: 16 },
                { name: '零售业', value: 25 },
                { name: '采矿业', value: 30 },
                { name: '其他', value: 57 }
              ]
            }
          ]
        },
        {
          $getDom: () => {
            return refs.pieChart
          }
        }
      )
    )
    /* 嵌套环图 */
    const pieDoubleOption = reactive(
      pie(
        {
          legend: {
            data: [
              '行业一',
              '行业二',
              '制造业',
              '建筑行业',
              '农林牧渔业',
              '零售业',
              '采矿业',
              '其他'
            ]
          },
          series: [
            {
              type: 'pie',
              radius: ['0%', '30%'],
              label: {
                position: 'inside',
                formatter({ name }) {
                  return name
                }
              },
              data: [
                { name: '行业一', value: 32 + 10 + 16 + 25 },
                { name: '行业二', value: 30 + 57 }
              ]
            },
            {
              type: 'pie',
              data: [
                { name: '制造业', value: 32 },
                { name: '建筑行业', value: 10 },
                { name: '农林牧渔业', value: 16 },
                { name: '零售业', value: 25 },
                { name: '采矿业', value: 30 },
                { name: '其他', value: 57 }
              ]
            }
          ]
        },
        {
          $getDom: () => {
            return refs.pieDoubleChart
          }
        }
      )
    )

    /* 散点图 */
    const scatterOption = reactive(
      scatter({
        xAxis: {
          name: '加权ROE%',
          min: 1,
          max: 12.5
        },
        yAxis: {
          min: 11,
          max: 15.5,
          name: '资本充足率%'
        },
        series: [
          {
            type: 'scatter',
            data: [
              [2.5, 12, '北京银行'],
              [2, 11.7, '上海银行'],
              [3.7, 12.8, '江苏银行'],
              [8, 13.5, '宁波银行'],
              [7.3, 14.8, '成都银行'],
              [6.9, 12.1, '南京银行'],
              [13, 11.45, '杭州银行'],
              [12, 14.8, '天津银行'],
              [4, 12.6, '重庆银行']
            ]
          }
        ]
      })
    )
    /* 得分环 */
    const ringGaugeOption = reactive(
      gauge({
        series: [
          {
            type: 'gauge',
            data: [
              {
                value: 33,
                name: '全行'
              },
              {
                value: 44,
                name: '对公'
              },
              {
                value: 60,
                name: '个人贷款'
              }
            ]
          }
        ]
      })
    )

    return {
      barOption,
      barNegativeOption,
      barTriplelineOption,
      barSixlineOption,
      barStackOption,
      barStackCompareOption,

      lineOption,
      lineDoubleOption,
      lineBaselineOption,
      lineDoublelineOption,
      lineTriplelineOption,
      lineSixlineOption,
      lineBubbleOption,

      barLineOption,
      barLineStackOption,
      barDoubleLineOption,
      barDoubleLineDoubleOption,
      barLineLineTripleOption,

      pieOption,
      pieDoubleOption,

      scatterOption,

      ringGaugeOption
    }
  }
}
</script>

<style scoped lang="scss">
.chart {
  height: 300px;
  margin-bottom: 35px;
}
.title {
  font-size: 14px;
  text-align: center;
  color: #666;
}
</style>
